{extend name="public/public"}
{block name='css'}
<style>
.c1{max-width: 1200px;margin: 0 auto;padding: 50px 0;}
.c2{margin-bottom: 20px;}
.c2 a{color: #666;}
.c2 span{display: inline-block;margin: 0 10px;}
.c3{align-items: flex-start;}
.c4{width: 230px;}
.c5{margin-left: 20px;flex:1;}
.c6{background: #222538;color: #fff;padding: 20px 25px;font-size: 18px;justify-content: space-between;}
.c6 .iconfont{display: none;}
.c7{border:1px solid #222538;}
.c8{border-bottom:1px solid #222538;position: relative;}
.c8:last-child{border:0;}
.c8 a{padding:15px 25px;color: #555;}
.c8:hover span{opacity: 1;}
.c8 .flex{justify-content: space-between;}
.c8 .iconfont{transition: .1s;display: none;}
.c8.active .iconfont{display: block;}
.c8:hover .iconfont{display: block;}
.c8.active a{color: #000;background: #f9f9f9;}
.c8.active span{opacity: 1;}
.c8 span{transition: .3s;opacity: 0;;display: block;width: 4px;background: #222538;position: absolute;left:4px;height: 20px;bottom:50%;margin-bottom: -10px;}
.c9{float: left;display: block;width: 31.33%;margin: 1%;margin-top: 0;padding: 10px;background: #f6f6f6;transition: .1s;}
.c9 img{width: 100%;display: block;}
.c9:hover {background: rgba(35, 38, 57, 0.42);}
.c9:hover p{color: #fff;}
.c10{background: #fff;}
.c11{padding-top: 10px;height: 54px;overflow: hidden;}
.c11 p{color: #555;line-height: 22px;margin: 0;}
.c12{margin-top: 30px;}
.c12 #page{text-align: right;}
@media screen and (max-width: 1380px){
  .c4{width: 200px;}
}
@media screen and (max-width:960px){
  .c1{padding: 20px;}
  .c3{display: block;}
  .c4{width: 100%;}
  .c5{margin-left: 0;margin-top: 20px;}
  .c6 .iconfont{display: block;}
  .c7{display: none;}
}
@media screen and (max-width:860px){
  .c9{width: 48%;}
}

@media screen and (max-width:500px){
  .c9{width: 100%;margin: 0 0 20px;}
  .c12 #page{text-align: center;}
}
</style>
{/block}

{block name="content"}
<div class="c1">
  <div class="c2 flex"><a href="{:url('index')}">首页</a><span>/</span><div>产品中心</div></div>
  <div class="c3 flex">
    <div class="c4">
      <div class="c6 flex">产品中心 <i class="iconfont">&#xe75f;</i></div>
      <div class="c7">
        <div class="c8 {if $type==0}active{/if}">
          <span></span>
          <a href="{:url('product',array('type_id'=>0))}" class="flex">全部 <i class="iconfont">&#xe76e;</i></a>
        </div>
        {volist name="$typeData" id="v"}
        <div class="c8 {if $type==$v['id']}active{/if}">
          <span></span>
          <a href="{:url('product',array('type_id'=>$v['id']))}" class="flex">{$v['name']} <i class="iconfont">&#xe76e;</i></a>
        </div>
        {/volist}
      </div>
    </div>
    <div class="c5 cle">
      {volist name="productData" id="vo"}
      <a class="c9" href="{:url('product_details',array('id'=>$vo['id']))}">
        <div class="c10"><img src="/uploads/{$vo.productImage}" alt=""></div>
        <div class="c11">
          <p>{$vo.productName}</p>
        </div>
      </a>
      {/volist}
    </div>
  </div>
  <div class="c12">
    <div id="page"></div>
  </div>
</div>
{/block}

{block name='js'}
<script>
    $(".nav-active-1").addClass('current-menu-item')

    layui.use('laypage', function(){
      var laypage = layui.laypage;
      laypage.render({
        elem: 'page' ,
        theme: '#222538',
        limit:Number("{$limit}"),
        curr: Number("{$page}"), //当前页
        count: "{$count}",
        jump: function(obj, first){
          var curr = obj.curr;//当前页
          if(!first){
            var str = "{:url('product',array('page'=>'anan','type'=>$type))}"; //先将变量以字符串的形式带入U函数中
            window.location.href = str.replace("anan",curr); //将代替变量的字符串用真实变量替换掉，OK搞定！
          }
        }
      });
    });

    $(".c6").click(function(){
      $(".c7").slideToggle()
    })
</script>
{/block}